<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache,must-revalidate"/>
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="Cache" content="no-cache"/>
    <title>设备截图</title>
    <script type="text/javascript" th:src="@{/lib/jquery-3.3.1.js}"></script>


</head>
<body>
<div style="height: 50px">
    地点：<input id="regionQuery" type="text"/>
    设备号：<input id="deviceIdQuery" type="text"/>
    <input id="searchBtn" type="button" value="查询" onclick="getTableList()"/>


    共<span id="total"></span>条记录
    共<span id="pages"></span>页
    当前 第<span id="pageNum">1</span>页

    每页
    <select id="pageSize" onchange="getTableList()">
        <option selected="selected" value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="999">全部</option>
    </select>条

    <a id="prePageBtn" href="javascript:void(0)" onclick="prePage()">上一页</a>
    <a id="nextPageBtn" href="javascript:void(0)" onclick="nextPage()">下一页</a>

</div>
<div>
    <table border="1" id="snapTable" class="snapTable">
        <!--<tr>
            <td>
                设备编号: <span>1111</span><br/>
                区域: <span>22222</span><br/>
                电话号码: <span>22222</span><br/>
            </td>
            <td>
                屏幕编号：<span></span><br/>
                屏幕类型：<span></span><br/>
                截屏时间：<span></span><br/>
                <img class="snapImg" src="http://localhost:11186/snapFile/device_0001_001.jpg"/>
            </td>
        </tr>-->
    </table>
</div>
</body>
<script type="text/javascript">
    /*<![CDATA[*/
    $(function () {
        getTableList();
        // console.log("start snapHome");
        // console.log($("#deviceListData").val());
        /*$("#searchBtn").click(function () {
            refreshTable();
        });*/


    });

    function getTableList() {
        //console.log($("#regionQuery").val(), $("#pageSize").val(), $("#pageNum").text());
        console.log("getTableList")
        $.ajax({
            url: "/snapMonitor/list",
            type: 'get',
            data: {
                deviceId: $("#deviceIdQuery").val(),
                region: $("#regionQuery").val(),
                pageSize: $("#pageSize").val(),
                pageNum: $("#pageNum").text()
            },
            success: function (data) {
                var devSnapPage = data.sst;
                var pageSize = devSnapPage.pageSize;
                var pages = devSnapPage.pages;
                var total = devSnapPage.total;
                var pageNum = devSnapPage.pageNum;
                var devSnapList = devSnapPage.deviceList;
                generateTableDom(devSnapList);
                $("#pageSize").val(pageSize);
                $("#pageNum").text(pageNum);
                $("#pages").text(pages);
                $("#total").text(total);
                checkChangePageBtn();
            }
        })
    }

    function generateTableDom(data) {

        var $trs = "";
        $(data).each(function (index, item) {

            $trs = $trs +
                "<tr>" +
                "<td>" +
                "设备编号: <span>" + item.DEVICE_ID + "</span><br/>" +
                "区域: <span>" + (item.REGION ? item.REGION : '未知') + "</span><br/>" +
                "电话号码: <span>" + (item.PHONE ? item.PHONE : '未知') + "</span><br/>" +
                "</td>"
            $(item.snapList).each(function (snapIndex, snap) {
                $trs = $trs +
                    "<td>" +
                    "屏幕编号：<span>" + snap.screenID + "</span><br/>" +
                    "屏幕类型：<span>" + (snap.screenType ? snap.screenType : '未知') + "</span><br/>" +
                    "截屏时间：<span>" + transformTime(snap.snapTime) + "</span><br/>" ;
                console.log(new Date().valueOf(),snap.snapTime);
                if((new Date()).getTime() - snap.snapTime*1 > 1000*60*300){

                    $trs = $trs + "<img class='snapImg' style='margin:auto ;background:black '  />"
                }else{
                    $trs = $trs + "<img class='snapImg' src='" + snap.snapPath + "?time=" + new Date() + "'/>"
                }

                    "</td>"
            })
            $trs += "</tr>"
            // console.log("trs:",$trs)

        })

        $('#snapTable').html($trs)
        // console.log($trs);
    }

    function nextPage() {
        $("#pageNum").text($("#pageNum").text() * 1 + 1);
        getTableList();
        checkChangePageBtn();
    }

    function prePage() {
        $("#pageNum").text($("#pageNum").text() * 1 - 1);
        getTableList();
        checkChangePageBtn();
    }

    function checkChangePageBtn() {
        var pageNum = $("#pageNum").text() * 1;
        var pages = $("#pages").text() * 1;
        if (pageNum === 1 && pageNum < pages) {
            $("#prePageBtn")[0].style.visibility = "hidden";
            $("#nextPageBtn")[0].style.visibility = "visible";
        } else if (pageNum > 1 && pageNum < pages) {
            $("#prePageBtn")[0].style.visibility = "visible";
            $("#nextPageBtn")[0].style.visibility = "visible";
        } else if (pageNum > 1 && pageNum === pages) {
            console.log($("#prePageBtn"));
            $("#prePageBtn")[0].style.visibility = "visible";
            $("#nextPageBtn")[0].style.visibility = "hidden";
        } else {
            $("#prePageBtn")[0].style.visibility = "hidden";
            $("#nextPageBtn")[0].style.visibility = "hidden";
        }
    }

    function transformTime(timestamp) {
        if (timestamp) {
            var time = new Date(timestamp);
            var y = time.getFullYear(); //getFullYear方法以四位数字返回年份
            var M = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
            var d = time.getDate(); // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
            var h = time.getHours(); // getHours方法返回 Date 对象的小时 (0 ~ 23)
            var m = time.getMinutes(); // getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
            var s = time.getSeconds(); // getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
            return y + '-' + M + '-' + d + ' ' + h + ':' + m + ':' + s;
        } else {
            return '';
        }
    }

    /*]]>*/
</script>
<style type="text/css">
    .snapTable {
        display: table;
        border-collapse: separate;
        width: 95%;
        margin: auto;
        margin-top: 40px;
        text-align: center;
        border: 1px #636363 solid;
    }

    .row {
        display: table-row;
        margin-top: 20px;
        border: 1px solid #636363;
    }

    .row .col {
        display: table-cell;
        vertical-align: middle;
        width: 20%;
    }

    .snapImg {
        width: 266px;
        height: 300px;
    }
</style>
</html>